<template>
	<div class="my-gold">
		<div class="my-gold__tap" @click="onTap('record')">
			<img class="my-gold__icon" src="@/assets/2/images/red-package/gold.png" />
			<span class="my-gold__value">{{ bwbt_userInfo.gold || 0 }}</span>
		</div>
		<span class="my-gold__money"> 约{{ momeny }}元</span>
		<button class="my-gold__btn" @click="onTap('exchange')">兑换</button>
	</div>
</template>

<script>
import { mapGetters } from 'vuex';

export default {
	computed: {
		...mapGetters(['bwbt_userInfo']),

		momeny() {
			return parseFloat((this.bwbt_userInfo.gold || 0) / 10000).toFixed(2);
		}
	},

	methods: {
		onTap(action) {
			this.$emit('click', action);
		}
	}
};
</script>

<style lang="scss" scoped>
.my-gold {
	display: flex;
	align-items: center;
	height: 50px;
	position: fixed;
	left: 0;
	top: 30px;
	background-color: rgba(0, 0, 0, 0.1);
	padding: 2px 20px;
	font-size: 24px;
	color: #fff;

	&__tap {
		display: flex;
		align-items: center;
	}

	&__icon {
		height: 40px;
		width: 40px;
	}

	&__value {
		margin: 0 10px;
	}

	&__money {
		margin-right: 10px;
	}

	&__btn {
		border: 4px solid #ffdf8f;
		background-image: linear-gradient(to right, #ff1c99, #ff1b02);
		color: #fff;
		border-radius: 50px;
		height: 50px;
		line-height: 44px;
		width: 100px;
		text-align: center;
		position: absolute;
		right: -80px;
		font-size: 24px;
		padding: 0 10px;

		&::after {
			border: 0;
		}
	}
}
</style>
